<template>
<l-layout class="l-tab-page" v-if="!lr_loadPage" >
    <l-panel>
        <template #toolLeft >
            <l-query2 :labelWidth="0" :popoverWidth="240" :items="queryItems" :formData="queryData" :loading="tableLoading" @search="handleSearch">
                <template #isDelete>
                    <el-radio-group v-model="queryData.isDelete" size="mini" @change="handleSearch" >
                        <el-radio-button label="0">{{ $t('站内消息') }}</el-radio-button>
                        <el-radio-button label="1">{{ $t('回收站') }}</el-radio-button>
                    </el-radio-group>
                </template>
                <template #keyword >
                    <el-input v-model="queryData.keyword" :placeholder="$t('请输入查询关键字')"></el-input>
                </template>
            </l-query2>
        </template>
        <template #toolRight >
            <l-tool-btns :hasAdd="false">
                <el-button-group>
                    <el-button type="danger" size="mini" @click="handleDelete()" >{{deleteBtnText}}</el-button>
                </el-button-group>
                <l-excel-btns></l-excel-btns>
            </l-tool-btns>
        </template>
        <l-table ref="mainTable" 
            rowKey="f_MsgId"
            :loading="tableLoading" 
            :columns="columns" 
            :dataSource="tableData"
            :isPage="true"
            :pageTotal="tableTotal"
            :tablePage.sync="tableCurrentPage"
            isMultiSelect
            @loadPageData="turnTablePage"
            >
            <template v-slot:f_Content="scope" >
                <el-button @click="handleLook(scope.row)" size="mini" type="text">{{scope.row.f_Content}}</el-button>
            </template>
            <template v-slot:f_IsRead="scope" >
                <el-tag v-if="scope.row.f_IsRead == 1" size="mini" type="success">{{ $t('已读') }}</el-tag>
                <el-tag v-else size="mini" type="warning ">{{ $t('未读') }}</el-tag>
            </template>
            <template v-slot:f_CreateDate="scope" >
                {{lr_dateFormat(scope.row.f_CreateDate)}}
            </template>
            <template v-slot:f_SendUserId="scope" >
                {{getName(scope.row.f_SendUserId)}}
            </template>
        </l-table>
    </l-panel>
    <component v-if="sysMessagereadly" ref="messageBox"  :is="sysMessageComponent"></component>
</l-layout>       
</template>

<script>
    const api = window.$api.message.msg
    const apiUser = window.$api.message.user
    export default {
        data() {
            return {
                lr_isPage:true,
                
                queryItems:[
                    {prop:'isDelete',span:24},
                    {prop:'keyword',span:24}
                ],
                queryData:{
                    isDelete:'0',
                    keyword:''
                },
                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'内容',prop:'f_Content',minWidth:120,align:'left'},
                    {label:'消息类型',prop:'f_SendUserId',width:120,align:'left'},
                    {label:'状态',prop:'f_IsRead',width:64,align:'center'},
                    {label:'时间',prop:'f_CreateDate',width:160,align:'left'}
                ],

                sysUserList:[],

                sysMessagereadly:false,
                sysMessageComponent:''

            }
        },
        computed: {
            deleteBtnText(){
                if(this.queryData.isDelete == '0'){
                    return this.$t('删除')
                }
                else{
                    return this.$t('彻底删除')
                }
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.loadSysUsers()
                this.loadTableData()
            },
            async loadSysUsers(){
                this.sysUserList = await this.$awaitWraper(apiUser.getList())
            },
            getName(code){
                const sysUser = this.sysUserList.find(t=>t.f_Code == code)
                if(sysUser){
                    return sysUser.f_Name
                }
                return ''
            },
            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                const queryData = this.$deepClone(this.queryData)
                
                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'F_IsRead,F_CreateDate DESC'

                const data = await this.$awaitWraper(api.getSysPage(queryData))

                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },
            handleLook(row){
                this.sysMessagereadly = false
                const sysuser = this.sysUserList.find(t=>t.f_Code == row.f_SendUserId)
                if(sysuser && sysuser.f_Url){
                    this.sysMessageComponent = sysuser.f_Url
                    this.sysMessagereadly = true
                    this.openMessageBox(row,0)  
                }
                row.f_IsRead = 1
                const api = window.$api.message.msg
                api.read(row.f_MsgId)
            },
            openMessageBox(item,num){
                if(this.$refs.messageBox){
                    this.$nextTick(async ()=>{
                        this.$refs.messageBox.open(item)
                    })
                }
                else if(num < 100){
                    setTimeout(async ()=>{
                        num++
                        this.openMessageBox(item,num)    
                    },100)
                }
            },

            handleDelete(){
                const selectedData = this.$refs.mainTable.getSelected()
                if(selectedData.length == 0){
                     this.$message({
                        type: 'warning',
                        message: this.$t('请选择数据！')
                    })    
                    return
                }

                const ids =String(selectedData.map(t=>t.f_MsgId))

                this.$confirm(`${this.$t('是否')}${this.deleteBtnText}${this.$t('数据')}?`, this.$t('提示'), {
                    confirmButtonText: this.$t('确定'),
                    cancelButtonText: this.$t('取消'),
                    type: 'warning'
                }).then(() => {
                    if(this.queryData.isDelete == '0'){
                        api.virtualDelete({ids: ids}).then(()=>{
                            this.$refs.mainTable.reset()
                            this.$message({
                                type: 'success',
                                message: `${this.deleteBtnText}${this.$t('成功')}!`
                            })
                            this.loadTableData(true)
                        })
                    }
                    else{
                        api.thoroughDelete({ids: ids}).then(()=>{
                            this.$refs.mainTable.reset()
                            this.$message({
                                type: 'success',
                                message: `${this.deleteBtnText}${this.$t('成功')}!`
                            })
                            this.loadTableData(true)
                        })
                    }

                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: `${this.$t('已取消')}${this.deleteBtnText}`
                    })         
                })
            }
        }
    }
</script>